<script setup lang="ts">
import Title from './Title.vue';
import { ref, onMounted } from 'vue';
import { init } from '../echarts-utils';
import type { ECOption } from '../echarts-utils';

const chart = ref<HTMLElement>();
// 男性占比
const manPercent = ref<number>(56);
// 女性占比
const womanPercent = ref<number>(44);

function initChart() {
  const myChart = init(chart.value);
  myChart.setOption({
    xAxis: {
      type: 'value',
      min: 0,
      max: 100,
      show: false
    },
    yAxis: {
      type: 'category',
      show: false
    },
    series: [
      {
        type: 'bar',
        data: [manPercent.value],
        stack: 'gender',
        barWidth: 20,
        itemStyle: {
          borderRadius: [10, 0, 0, 10],
          color: '#007afe'
        },
        label: {
          show: true,
          fontSize: 10,
          position: 'top',
          formatter: obj => `男士${obj.value!}%`
        }
      },
      {
        type: 'bar',
        data: [womanPercent.value],
        stack: 'gender',
        barWidth: 20,
        itemStyle: {
          borderRadius: [0, 10, 10, 0],
          color: '#ff4b7a'
        },
        label: {
          show: true,
          fontSize: 10,
          position: 'top',
          formatter: '女士{c}%'
        }
      }
    ]
  } as ECOption);
}

onMounted(() => {
  initChart();
});
</script>

<template>
  <div class="gender fit column">
    <Title title="男女比例"></Title>
    <div class="avator q-mt-xl q-px-lg row justify-evenly">
      <div class="man"></div>
      <div class="woman"></div>
    </div>
    <div ref="chart" class="col"></div>
  </div>
</template>

<style scoped>
.gender {
  background: url(../images/dataScreen-main-lc.png) no-repeat;

  .avator {
    div {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100px;
      height: 100px;
      &::after {
        content: '';
        width: 60px;
        height: 60px;
      }
      &::before {
        margin-bottom: 10px;
        font-size: 12px;
        color: #fff;
      }
    }
    .man {
      background: url(../images/man-bg.png) no-repeat;
      background-position: center center;
      background-size: contain;
      /* 为啥位置属性要放在后面才能生效 */
      &::after {
        background: url(../images/man.png) no-repeat;
      }
      &::before {
        content: '男士';
      }
    }
    .woman {
      background: url(../images/woman-bg.png) no-repeat;
      background-position: center center;
      background-size: contain;
      &::after {
        background: url(../images/woman.png) no-repeat;
      }
      &::before {
        content: '女士';
      }
    }
  }
}
</style>
